<template>
  <!-- 下发命令弹窗 -->
  <div class="command">
    <a-modal :open="open" title="下发命令" @ok="clickOk" @cancel="clickCancel">
      <a-textarea
        placeholder="请输入"
        :auto-size="{ minRows: 10 }"
        v-model:value="formData.instruction"
      />
    </a-modal>
  </div>
</template>
<script setup>
  // 引入组件
  // 引入方法
  import api from '@/axios/api.js'
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import { message } from 'ant-design-vue'
  const props = defineProps({
    open: {
      default: false,
    },
    info: {
      default: {
        procInstId: undefined,
      },
    },
  })
  const emits = defineEmits(['cancel'])
  // 自定义状态
  const formData = ref({
    procInstId: undefined,
    instruction: undefined,
  })
  onMounted(() => {
    formData.value.procInstId = props.info.procInstId
  })
  watch(
    props.info,
    value => {
      formData.value.procInstId = value.procInstId
    },
    {
      deep: true,
    }
  )
  // 自定义方法
  //下发命令
  const issueAnOrder = async data => {
    const res = await api.issueAnOrder(data)
    console.log('下发命令', res)
    if (res.data.data === 200) {
      message.success('下发命令成功')
      clickCancel()
    } else {
      message.error(res.data.msg)
    }
  }
  //点击确定
  const clickOk = () => {
    issueAnOrder(formData.value)
  }
  //点击取消
  const clickCancel = () => {
    emits('cancel')
  }
</script>
<style lang="less" scoped></style>
